<!doctype html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
<!-- Author: Dalia Hosny C5-07 -->
<!-- The following code validates the search engine fields (search by and textbox so as for the user not to enter empty fields-->
$(document).ready(function(){
$('#searchEngineForm').validate();
});
<!-- Author: Dalia Hosny C5-07 -->
<!-- The next code is a function that works when the search method is used, when the user types something in the third field this function calls the method autoCompleteSearch which in return retrieves data from the database and shows it in the form of real-time data in the box of the search box -->

$(document).ready(function(){
     $( "input#autocompleteSearch" ).autocomplete({
                            source: "{% url autoCompleteSearch %}",
                            minLength: 1,
                            autoFocus: true

        });
});
</script>
<title>
TestPage
</title>
</head>

<body>
<br>
<!-- Author: Dalia Hosny C5-07 -->
<!-- this code displays the search engine form in the Dash board home -->

<div style="color:black" align="center"> 
<h2>Search your events here:</h2>
   <form id = "searchEngineForm" action="/searchEngine/" method="POST">
   {%csrf_token%}
    <select id = "drop-down-list" name="Categories" class="required">
    <option value="" selected="selected">Search by...</option>
      <option value="Name">Name</option>
      <option  value="Location">Location</option>
      <option  value="Tag">Tag</option>
      <option  value="Category">Category</option>
    </select>
    <input id = "autocompleteSearch" type="text" size="60" name="search" class="required" minlength="1">
    <input type="submit" value="Search now!" ><br>
    </form>
</div>
<!-- Auther: Pauline Kazman
This block contains the form that takes from the user both the email and password. Also it has the submit button that calls the method logIn -->
<form action = "/login/ " method = "POST">
<p>Email: <input type="text" name=email size="10">
<p>Password: <input type="password" name=password size="10">
<button type="submit" value="submit"> Login </button>
<p> {{match}}</p>
<p> {{notFound}}</p>
</form>

<a href ="/password_reset/"><button>Reset Password</button></a>
</form>    </div>

</body>

<p>
<a href="/AboutUs/">About Us</a>
<a href="/ViewInstructions/">Instructions</a>
<a href  ="/Terms&Conditions/">  Terms & Conditions</a>
<a href  ="/News/">  Latest News and Updates</a>
<a href ="/Faqs/"> FAQS</a>
<a href ="/Contactus/"> Contact Us</a>

